<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">订单进度</text>
    </view>

    <!-- 订单基本信息 -->
    <view class="order-info">
      <view class="order-header">
        <text class="order-id">订单号：{{ order.id }}</text>
        <text class="order-status" :class="getStatusClass(order.status)">{{ order.status }}</text>
      </view>
      <view class="package-info">
        <text class="package-name">{{ order.packageName }}</text>
        <text class="booking-time">预约时间：{{ order.bookingTime }}</text>
      </view>
    </view>

    <!-- 进度时间线 -->
    <view class="progress-timeline">
      <view 
        v-for="(step, index) in progressSteps" 
        :key="index" 
        class="timeline-item"
        :class="{ 'completed': step.completed, 'current': step.current }"
      >
        <view class="timeline-dot"></view>
        <view class="timeline-content">
          <view class="timeline-header">
            <text class="timeline-title">{{ step.title }}</text>
            <text class="timeline-time">{{ step.time }}</text>
          </view>
          <text class="timeline-desc">{{ step.description }}</text>
          <view class="timeline-images" v-if="step.images && step.images.length">
            <image 
              v-for="(img, imgIndex) in step.images" 
              :key="imgIndex" 
              :src="img" 
              mode="aspectFill" 
              class="timeline-image"
              @tap="previewImage(step.images, imgIndex)"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="btn-secondary" @tap="contactCustomerService">联系客服</button>
      <button class="btn-primary" @tap="contactPhotographer">联系摄影师</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      order: {
        id: '',
        status: '',
        packageName: '',
        bookingTime: '',
        photographerPhone: ''
      },
      progressSteps: [
        {
          title: '订单创建',
          time: '2023-11-24 10:30',
          description: '您已成功创建订单并完成支付',
          completed: true,
          current: false,
          images: []
        },
        {
          title: '摄影师确认',
          time: '2023-11-24 11:15',
          description: '摄影师已确认您的预约',
          completed: true,
          current: false,
          images: []
        },
        {
          title: '拍摄中',
          time: '2023-11-24 14:00',
          description: '摄影师正在为您拍摄',
          completed: true,
          current: false,
          images: [
            'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
            'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
          ]
        },
        {
          title: '照片处理中',
          time: '2023-11-24 16:30',
          description: '摄影师正在处理您的照片，预计需要1-2天',
          completed: false,
          current: true,
          images: []
        },
        {
          title: '照片交付',
          time: '预计 2023-11-26',
          description: '照片处理完成后，将发送给您',
          completed: false,
          current: false,
          images: []
        }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getOrderDetail();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    // 获取订单详情
    getOrderDetail() {
      // 这里应该从服务器获取订单详情
      // 模拟数据
      const mockOrders = [
        {
          id: '20231125001',
          photographerName: '小明摄影',
          photographerPhone: '13812345678',
          status: '待拍摄',
          packageName: '基础套餐',
          packageDesc: '30张精修照片，拍摄时间1小时',
          bookingTime: '2023-11-25 上午',
          price: 199,
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde'
        },
        {
          id: '20231124002',
          photographerName: '小蓝摄影',
          photographerPhone: '13987654321',
          status: '进行中',
          packageName: '高级套餐',
          packageDesc: '50张精修照片，拍摄时间2小时',
          bookingTime: '2023-11-24 下午',
          price: 299,
          avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61'
        }
      ];
      
      const order = mockOrders.find(item => item.id === this.id);
      if (order) {
        this.order = order;
        
        // 根据订单状态调整进度步骤
        if (order.status === '待拍摄') {
          this.progressSteps = [
            {
              title: '订单创建',
              time: '2023-11-25 08:30',
              description: '您已成功创建订单并完成支付',
              completed: true,
              current: false,
              images: []
            },
            {
              title: '摄影师确认',
              time: '2023-11-25 09:15',
              description: '摄影师已确认您的预约',
              completed: true,
              current: true,
              images: []
            },
            {
              title: '拍摄',
              time: '预计 2023-11-25 上午',
              description: '请按时到达拍摄地点',
              completed: false,
              current: false,
              images: []
            },
            {
              title: '照片处理',
              time: '预计 1-2 天',
              description: '摄影师将处理您的照片',
              completed: false,
              current: false,
              images: []
            },
            {
              title: '照片交付',
              time: '预计 2023-11-27',
              description: '照片处理完成后，将发送给您',
              completed: false,
              current: false,
              images: []
            }
          ];
        }
      } else {
        uni.showToast({
          title: '订单不存在',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      switch(status) {
        case '待拍摄': return 'status-pending';
        case '进行中': return 'status-processing';
        case '已完成': return 'status-completed';
        default: return '';
      }
    },
    
    // 预览图片
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      });
    },
    
    // 联系摄影师
    contactPhotographer() {
      uni.showActionSheet({
        itemList: ['拨打电话', '发送短信'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 拨打电话
            uni.makePhoneCall({
              phoneNumber: this.order.photographerPhone,
              fail: () => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          } else if (res.tapIndex === 1) {
            // 发送短信
            uni.showToast({
              title: '短信功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 联系客服
    contactCustomerService() {
      uni.showToast({
        title: '客服功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F3F4F6;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.order-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.order-id {
  font-size: 28rpx;
  color: #6B7280;
}

.order-status {
  font-size: 28rpx;
  font-weight: 500;
}

.status-pending {
  color: #F59E0B;
}

.status-processing {
  color: #3B82F6;
}

.status-completed {
  color: #10B981;
}

.package-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
  margin-bottom: 10rpx;
}

.booking-time {
  font-size: 28rpx;
  color: #6B7280;
}

.progress-timeline {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.timeline-item {
  position: relative;
  padding-left: 30rpx;
  padding-bottom: 40rpx;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item:before {
  content: '';
  position: absolute;
  left: 10rpx;
  top: 30rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #E5E7EB;
}

.timeline-item:last-child:before {
  display: none;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 16rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #E5E7EB;
  border: 4rpx solid #fff;
  z-index: 1;
}

.timeline-item.completed .timeline-dot {
  background-color: #10B981;
}

.timeline-item.current .timeline-dot {
  background-color: #3B82F6;
  box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.2);
}

.timeline-content {
  padding: 10rpx 0;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.timeline-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
}

.timeline-time {
  font-size: 26rpx;
  color: #6B7280;
}

.timeline-desc {
  font-size: 28rpx;
  color: #6B7280;
  margin-bottom: 10rpx;
}

.timeline-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.timeline-image {
  width: 150rpx;
  height: 150rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.bottom-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.btn-primary, .btn-secondary {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.btn-primary {
  background-color: #6366F1;
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  color: #6B7280;
  border: 1rpx solid #D1D5DB;
}
</style>